<template>
  <div class="settings-view">
    <h1>⚙️ 系统设置</h1>
    <el-card class="card" shadow="never">
      <el-form :model="form" label-width="120px">
        <el-form-item label="后端API地址">
          <el-input v-model="form.apiBase" placeholder="例如：http://localhost:8080" />
          <div class="desc">用于请求后端与拼接静态资源（如海报、头像）。</div>
        </el-form-item>

        <el-form-item label="默认每页条数">
          <el-select v-model.number="form.pageSize" class="w-200">
            <el-option :value="6" label="每页6条" />
            <el-option :value="12" label="每页12条" />
            <el-option :value="24" label="每页24条" />
            <el-option :value="48" label="每页48条" />
          </el-select>
        </el-form-item>

        <el-form-item label="活动默认排序">
          <div class="inline">
            <el-select v-model="form.eventSortBy" class="w-200">
              <el-option label="开始时间" value="startTime" />
              <el-option label="标题" value="title" />
              <el-option label="创建时间" value="createdAt" />
              <el-option label="状态" value="status" />
              <el-option label="最低价" value="lowestPrice" />
              <el-option label="热度" value="popularity" />
            </el-select>
            <el-select v-model="form.eventOrder" class="w-160">
              <el-option label="升序" value="ASC" />
              <el-option label="降序" value="DESC" />
            </el-select>
          </div>
          <div class="desc">与后端允许的排序字段保持一致。</div>
        </el-form-item>

        <el-form-item label="操作">
          <el-button type="primary" @click="save">保存设置</el-button>
          <el-button @click="reset">恢复默认</el-button>
          <el-button type="warning" @click="clearToken">清除登录令牌</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card class="card" shadow="never">
      <h3>当前配置预览</h3>
      <ul class="preview">
        <li><strong>API地址：</strong>{{ form.apiBase }}</li>
        <li><strong>每页条数：</strong>{{ form.pageSize }}</li>
        <li><strong>活动排序：</strong>{{ form.eventSortBy }} / {{ form.eventOrder }}</li>
      </ul>
    </el-card>
  </div>
  
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'

const DEFAULTS = {
  apiBase: 'http://localhost:8080',
  pageSize: 12,
  eventSortBy: 'startTime',
  eventOrder: 'ASC'
}

const form = ref({ ...DEFAULTS })

function load() {
  try {
    const raw = localStorage.getItem('admin_settings')
    if (raw) {
      const s = JSON.parse(raw)
      form.value = { ...DEFAULTS, ...s }
    }
  } catch (_) {}
}

function save() {
  try {
    localStorage.setItem('admin_settings', JSON.stringify(form.value))
    // 同步单独的 API 覆盖键，供请求拦截器使用
    localStorage.setItem('admin_api_base', String(form.value.apiBase || DEFAULTS.apiBase))
    ElMessage.success('设置已保存')
  } catch (e) {
    ElMessage.error('保存失败')
  }
}

function reset() {
  form.value = { ...DEFAULTS }
  save()
}

function clearToken() {
  localStorage.removeItem('admin_token')
  ElMessage.success('已清除登录令牌')
}

onMounted(load)
</script>

<style scoped>
.settings-view {
  padding: 20px;
}
.card { margin-bottom: 16px; }
.w-200 { width: 200px; }
.w-160 { width: 160px; margin-left: 12px; }
.inline { display: flex; align-items: center; }
.desc { font-size: 12px; color: #888; margin-top: 6px; }
.preview { list-style: none; padding: 0; margin: 8px 0 0; }
.preview li { line-height: 28px; }
</style>